<template>
  <div>
    <div>
      {{obj.a}}
      <button @click="obj.a++">a++</button>
    </div>
     <div>
      {{obj.b}}
      <button @click="obj.b++">a++</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      obj:{
        a:10,
        b:20
      }
    }
  },
  computed:{
    cloneObj(){
      return {...this.obj}
    }
  },
  watch:{
    cloneObj:{
      handler(newval,oldval){
        console.log(newval,oldval);
      },
      deep:true
    }

    /*
    "obj.a":{
      handler(newval,oldval){
        console.log('obj.a',newval,oldval);
      }
    },
    "obj.b":{
      handler(newval,oldval){
        console.log('obj.b',newval,oldval);
      }
    }
    */
  }
}
</script>

<style>

</style>